<template>
    <div class="tr">
        <div class="tr-top">
            <div class="left">

            </div>
            <div class="right">
                <div class="itm"> <el-input clearable v-model="tableObjData.name__like" style="width: 240px"
                        placeholder="输入名称" /></div>
                <div class="itm"><el-button @click="getEv(true)">查询</el-button></div>
            </div>
        </div>
        <div class="table-content">
            <el-table empty-text="暂无数据" border height="100%" :data="tableListData">
                <el-table-column align="center" type="index" label="#" width="50" />
                <el-table-column show-overflow-tooltip  align="center" header-align="center" prop="name" label="看板名称" width="150">
                    <template #default="scope">
                        <el-tag :type="scope.row.type == 1 ? 'danger' : 'primary'">{{ scope.row.name }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip  align="center" header-align="center" prop="rem" label="备注" width="250" />
                <el-table-column  align="center" header-align="center" label="操作" width="180">
                    <template #default="scope">
                        <el-button @click="previewEv(scope.row.id)" link type="primary" size="small">
                            预览
                        </el-button>
                        <el-button @click="cloneButtonEv(scope.row.id)" link type="primary" size="small">
                            克隆
                        </el-button>
                        <el-button :disabled="scope.row.type == 1 ? true : false" link
                            @click="deleteRowEv(scope.row.id)" type="primary" size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogVisible" title="看板名称" width="300" :before-close="handleClose">
            <div>
                <div><el-input v-model="copyName" style="width:100%" placeholder="请输入看板名称" clearable /></div>
                <div style="padding-top: 10px;"><el-input v-model="copyRem" style="width: 100%" :rows="2"
                        type="textarea" placeholder="请输入看板备注" /></div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="cloneChartEv">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <pagination v-show="tableObjData.total > 0" :total="tableObjData.total" v-model:page="tableObjData.page"
            v-model:limit="tableObjData.pageSize" @pagination="getEv(true)" />
    </div>
</template>

<script setup>
import { ChartListGet,ChartPkPost, ChartPkDelete } from '@/api/chart/index.js'
import { ref, reactive, onMounted, onActivated } from 'vue'
import { loadingStore } from '@/stores/index.js'
const loading = loadingStore()

const copyName = ref('')
const copyRem = ref('')
const copyId = ref('')
const dialogVisible = ref(false)

const tableObjData = reactive({
    name__like: '',
    page: 1,
    total: 0,
    has_next: false,
    has_prev: false,
    pages: 0,
    pageSize: 20
})

const tableListData = ref([

])

onMounted(() => {
    getEv(false)
})
onActivated(() => {

})
// 查询数据
const getEv = async (msg) => {
    loading.loading = true
    try {
        let arr_data = await ChartListGet(tableObjData)
        if (arr_data.status != 200) {
            return
        }
        if (msg == true) {
            ElMessage.success('查询成功')
        }
        tableListData.value = arr_data.data.result.data
        tableObjData.total = arr_data.data.result.total
        tableObjData.has_next = arr_data.data.result.has_next
        tableObjData.has_prev = arr_data.data.result.has_prev
        tableObjData.pages = arr_data.data.result.pages
        tableObjData.pageSize = arr_data.data.result.pageSize

    } catch (error) {
        ElMessage.error('查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 删除数据
const deleteRowEv = async (rowId) => {
    const message = await ElMessageBox.confirm('确定删除此数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning ',
        confirmButtonClass: 'confirm-suer',
        cancelButtonClass: 'confirm-cancel',
        roundButton: true,
    }).catch((err) => err)
    if (message === 'confirm') {
        loading.loading = true
        try {
            let arr_data = await ChartPkDelete(rowId)
            if (arr_data.status != 200) {
                return
            }
            await getEv(false)
            ElMessage.success('删除成功')
        } catch (error) {
            ElMessage.error('删除接口请求失败' + error)
        } finally {
            loading.loading = false
        }
    }
}

// 点击克隆按钮
const cloneButtonEv = (rowId) => {
    dialogVisible.value = true
    copyId.value = rowId
    copyName.value = ''
    copyRem.value = ''
}

// 克隆关闭事件
const handleClose = (done) => {
    done()
}

// 克隆增加数据事件
const cloneChartEv = async () => {
    loading.loading = true
        try {
            let arr_data = await ChartPkPost({name:copyName.value,rem:copyRem.value},copyId.value)
            if (arr_data.status != 200) {
                return
            }
            dialogVisible.value = false
            await getEv(false)
            ElMessage.success('克隆成功')
        } catch (error) {
            ElMessage.error('克隆接口请求失败' + error)
        } finally {
            loading.loading = false
        }
}
// 预览看板
const previewEv = (id) => {
    // route.replace({ path: router })

    window.open('/chart/pk/' + id, '_blank');
    // route.push({ path: '/chart1/' + id, params: { userId: 123 } })
}

const getDataEv = async () => {
    console.log('查询数据')
    let data = {}
    data.pool = props.data.pool
    data.sql = props.data.sql
    data.components = props.data.components
    try {
        let arr_data = await ChartGetDataListPost(data)
        if (arr_data.status != 200) {
            return
        }
        props.data.text.contentLeft = arr_data.data.result.contentLeft
        props.data.text.contentRight = arr_data.data.result.contentRight
    } catch (error) {
        ElMessage.error('面板数据查询接口异常' + error)
    } finally {
        startTimerEv()
    }
}

// 启动定时器
const startTimerEv = () => {
    if (props.data.sql == '') {
        return
    }
    if (props.data.pool == '') {
        return
    }

    if (timer) clearInterval(timer);
    // 设置每秒滚动一行
    timer = setInterval(() => {

        getDataEv()

    }, props.data.time * 1000);
}

</script>

<style lang='less' scoped>
.tr {
    height: 100%;
}

.tr-top {
    height: var(--tr-top-height);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
        display: flex;
        align-items: center;
    }

    .right {
        display: flex;
        align-items: center;
    }

    .itm {
        padding-right: 4px;
        box-sizing: border-box;
    }
}

.table-content {
    height: calc(100% - var(--tr-top-height) - var(--tr-page-height));
}
</style>